$(function () {

var content=$("#content");
var img=$(".imgList img");
var span=$(".circle span");
console.log(img.length+span.length);
console.log(span);
var left=$(".narrow .left");
var right=$(".narrow .right");
var timer=setInterval(autoGo,5000);
console.log(left+right);
var index=0;
function Go(){
    $(img).css('opacity','0');
    $(img[index]).css('opacity','1');
    $(span).removeClass('selected');
    $(span[index]).addClass('selected');
}
function autoGo(){
    if(index==span.length-1){
        index=0;
    }else{
        index++;
    }
    Go();
};
left.click(function () {
    if(index==0){
        index=span.length-1;
    }else{
        index--;
    }
    Go();
});
right.click(function () {
    if(index==span.length-1){
        index=0;
    }else{
        index++;
    }
    Go();
});
span.mouseover(function () {
    index=$(this).index();
    console.log("index"+index);
    Go();
});


    content.mouseover(function () {
        clearInterval(timer);
    });
    content.mouseleave(function () {
        timer=setInterval(autoGo,5000);
    });


});